<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>代码编辑器</title>
		<script src="/vue"></script>
		<link rel="shortcut icon" href="/favicon.png" type="image/png" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body,
			html {
				height: 100%;
				width: 100%;
				background: #ffc;
			}

			#nav {
				user-select: none;
				height: 100vh;
				overflow: scroll;
			}

			#nav * {
				cursor: pointer;
				white-space: nowrap;
			}

			#nav #name:hover {
				background-color: #eeb;
			}

			#editor {
				width: 75vw;
				border-left: solid #050 1px;
				background: #ffc;
				position: fixed;
				right: 0;
				top: 0;
				height: 100vh;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="nav">
				<div style="width: 100%;">
					<project v-for="i in projects" :k="i.name" :key="i.name" :projectdata="i"></project>
				</div>
			</div>
			<div id="editor">

			</div>
		</div>
		<script>
			const files = {
				html: "/more/image/type/html.png",
				htm: "/more/image/type/html.png",
				close_folder: "/more/image/type/close_folder.png",
				open_folder: "/more/image/type/open_folder.png",
				vue: "/more/image/type/vue.png",
				js: "/more/image/type/js.png",
				ts: "/more/image/type/ts.png",
				md: "/more/image/type/md.png",
				markdown: "/more/image/type/md.png",
				less: "/more/image/type/less.png",
				css: "/more/image/type/css.png",
			}
			Vue.component("dir", {
				props: {
					dirdata: {
						type: Object
					},
					k: {
						type: String
					},
					space: {
						type: Number
					}
				},
				data() {
					return {
						isShow: false,
						files
					}
				},
				computed: {
					extname() {
						const name = this.dirdata.name.split(".");
						return name[name.length - 1];
					}
				},
				template: `
					<div style="width: 100%;" :space="space+4" id="name" v-if="!dirdata.isDir">
						{{"&nbsp;".repeat(space)}}<img style="width: 16px;" :src="files[extname]"/>{{dirdata.name}}<br/>
					</div>
					<div style="width: 100%;" v-else>
						<div id="name" @click="isShow = !isShow">
							{{"&nbsp;".repeat(space)}}<img style="width: 16px;" :src="isShow ? files.open_folder : files.close_folder"/>{{dirdata.name}}
						</div>
						<dir :space="space+4" v-show="isShow" v-for="i in dirdata.files" :key="k+'-'+i.name" :k="k+'-'+i.name" :dirdata="i"></dir>
					</div>
				`
			});
			new Vue({
				el: "#app",
				data: {
					projects: [{
						name: "test",
						files: [{
							name: "index.css",
							isDir: false
						}, {
							name: "index1.html",
							isDir: false
						}, {
							name: "index2.js",
							isDir: false
						}, {
							name: "test",
							isDir: true,
							files: [{
								name: "index.ts",
								isDir: false
							}, {
								name: "index1.less",
								isDir: false
							}, {
								name: "index2.md",
								isDir: false
							}, {
								name: "index3.markdown",
								isDir: false
							}, {
								name: "index4.htm",
								isDir: false
							}, {
								name: "index5.vue",
								isDir: false
							}]
						}]
					}, {
						name: "测试2",
						files: [{
							name: "index.css",
							isDir: false
						}, {
							name: "index1.html",
							isDir: false
						}, {
							name: "index2.js",
							isDir: false
						}, {
							name: "test",
							isDir: true,
							files: [{
								name: "index.ts",
								isDir: false
							}, {
								name: "index1.less",
								isDir: false
							}, {
								name: "index2.md",
								isDir: false
							}, {
								name: "index3.markdown",
								isDir: false
							}, {
								name: "index4.htm",
								isDir: false
							}, {
								name: "index5.vue",
								isDir: false
							}]
						}]
					}]
				},
				components: {
					project: {
						props: {
							projectdata: {
								type: Object
							},
							k: {
								type: String
							}
						},
						data() {
							return {
								isShow: false,
								files
							}
						},
						template: `
							<div style="padding-bottom: 1pc;">
								<div id="name" @click="isShow = !isShow">
									{{projectdata.name}}
								</div>
								<dir v-show="isShow" :space="4" v-for="i in projectdata.files" :key="k+'-'+i.name" :dirdata="i" :k="k+'-'+i.name"></dir>
							</div>
						`,
					}
				}
			});
		</script>
	</body>
</html>